<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="手机号查找">
        <el-input
          v-model="queryData.phone"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
          v-model="queryData.idCardNoVerify"
          placeholder="选择你要查询状态的信息"
        >
          <el-option label="查询全部" value=""/>
          <el-option label="未审核" value="false"/>
          <el-option label="已审核" value="true"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="queryUser(queryData, pageSize,1)"
        >查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="userData.records" style="width: 100%">
      <el-table-column label="统一认证id" prop="authId"/>
      <el-table-column label="身份证号" prop="idCardNo"/>
      <el-table-column label="身份证号是否验证">
        <template slot-scope="scope">
          <p v-if="scope.row.idCardNoVerify == true">审核通过</p>
          <p v-if="scope.row.idCardNoVerify == false">审核未通过</p>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone"/>
      <el-table-column label="操作" fixed="right" width="320">
        <template #default="scope">
          <el-button
            v-if="scope.row.idCardNoVerify == true"
            type="success"
            size="mini"
            disabled="disabled"
          >
            已审
          </el-button>
          <el-button
            v-else-if="scope.row.idCardNoVerify == false"
            type="primary"
            size="mini"
            @click="checkMember(scope.$index, scope.row)"
          >
            审核
          </el-button>

          <router-link :to="'/user/update/' + scope.row.id">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-button
            size="mini"
            type="info"
            @click="showAddressBookInfoByUserId(scope.$index, scope.row)"
          >查看详情
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="Number(userData.current)"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="Number(userData.size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(userData.total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 用户对应的地址簿信息 -->

    <el-dialog title="地址簿信息" :visible.sync="dialogFormVisible">
      <el-button type="primary" @click="openAdd">增加地址簿</el-button>
      <div slot="footer" class="dialog-footer">
        <!-- 表格 -->
        <el-table :data="addressByUserIdData.records" style="width: 100%">
          <el-table-column label="姓名" prop="name" fixed="left"/>
          <el-table-column label="电话号" prop="phoneNumber" width="160"/>
          <el-table-column label="分机号" prop="extensionNumber"/>
          <el-table-column label="所属地址" width="180">
            <template slot-scope="scope">
              <p v-model="queryAddress[0]=scope.row.provinceId,queryAddress[1]=scope.row.cityId,queryAddress[2]=scope.row.countyId"></p>
              <area-cascader :disabled="true" type="code" v-model="queryAddress" :level="1" :data="pcaa"></area-cascader>
            </template>
          </el-table-column>
          <el-table-column label="详细地址" prop="address" width="220"/>
          <el-table-column label="公司名称" prop="companyName" width="220"/>
          <el-table-column label="是否为默认地址" width="140">
            <template slot-scope="scope">
              <p v-if="scope.row.isDefault == true">
                <b>是</b>
              </p>
              <p v-else-if="scope.row.isDefault == false">否</p>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160"/>
          <el-table-column label="操作" fixed="right" width="250">
            <template #default="scope">
              <el-button
                v-if="scope.row.isDefault == false"
                size="mini"
                type="info"
                @click="changeTheDefaultAddress(scope.$index, scope.row)"
              >设为默认
              </el-button>
              <el-button
                size="mini"
                @click="getAddressDataById(scope.$index, scope.row)"
              >更改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteAddress(scope.$index, scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-button
          @click="(dialogFormVisible = false), (addressByUserIdData = {})"
        >取 消
        </el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), (addressByUserIdData = {})"
        >确 定
        </el-button>
      </div>
    </el-dialog>

    <!-- 地址簿修改 -->
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <el-form ref="form" :model="addressByIdData" label-width="110px">
        <el-form-item label="用户Id:">
          <el-input
            v-model="addressByIdData.userId"
            disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="addressByIdData.name"/>
        </el-form-item>
        <el-form-item label="电话号:">
          <el-input v-model="addressByIdData.phoneNumber"/>
        </el-form-item>
        <el-form-item label="分机号:">
          <el-input v-model="addressByIdData.extensionNumber"/>
        </el-form-item>
        <el-form-item label="地址">
          <div>
            <area-cascader  type="code" v-model="updateAddress" :level="1" :data="pcaa"></area-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input v-model="addressByIdData.address"/>
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input v-model="addressByIdData.companyName"/>
        </el-form-item>

        <el-form-item label="是否默认:">
          <div>
            <el-radio
              v-model="addressByIdData.isDefault"
              :label="Boolean(true)"
              disabled="disabled"
              border
            >默认地址
            </el-radio>
            <el-radio
              v-model="addressByIdData.isDefault"
              :label="Boolean(false)"
              disabled="disabled"
              border
            >不是默认地址
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-input
            v-model="addressByIdData.createTime"
            disabled="disabled"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更改</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 地址簿添加 -->
    <el-dialog title="提示" :visible.sync="dialogVisible2">
      <el-form ref="form" :model="addressByIdData2" label-width="110px">
        <el-form-item label="用户Id:">
          <el-input
            v-model="addressByIdData2.userId"
            disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="addressByIdData2.name"/>
        </el-form-item>
        <el-form-item label="电话号:">
          <el-input v-model="addressByIdData2.phoneNumber"/>
        </el-form-item>
        <el-form-item label="分机号:">
          <el-input v-model="addressByIdData2.extensionNumber"/>
        </el-form-item>
        <el-form-item label="地址">
          <div>
            <area-cascader type="code" v-model="selectedAddress" :level="1" :data="pcaa"></area-cascader>

          </div>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input v-model="addressByIdData2.address"/>
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input v-model="addressByIdData2.companyName"/>
        </el-form-item>

        <el-form-item label="是否默认:">
          <div>
            <el-radio
              v-model="addressByIdData2.isDefault"
              :label="Boolean(true)"
              disabled="disabled"
              border
            >默认地址
            </el-radio>
            <el-radio
              v-model="addressByIdData2.isDefault"
              :label="Boolean(false)"
              disabled="disabled"
              border
            >不是默认地址
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAddress">注册</el-button>
          <el-button @click="dialogVisible2 = false,addressByIdData2={}">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import user from '@/api/user/user'
import distpicker from 'v-distpicker'
import { pca, pcaa } from 'area-data'

export default {
  name: 'Index',
  components: {
    distpicker
  },
  data() {
    return {
      updateAddress:[],
      selectedAddress: [],
      queryAddress: [],
      pca: pca,
      pcaa: pcaa,
      dialogVisible: false,
      dialogVisible2: false,
      addressByUserIdData: {},
      /**
       * 查询对象
       */
      queryData: {
        phone: '',
        idCardNoVerify: ''
      },
      /**
       * 页数
       */
      pageSize: 0,
      /**
       * 页码
       */
      current: 0,
      /**
       * 获取到的数据
       */
      userData: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      /**
       * 地址查询对象
       */
      addressData: {
        name: '',
        userId: ''
      },
      /**
       * 地址簿查询页面数量大小
       */
      addressPageSize: 1000,
      /**
       * 地址簿查询当前页码
       */
      addressPageNum: 0,
      // province:'',
      // city:'',
      /**
       * 根据id获取的数据
       */
      addressByIdData: {},
      /**
       * 添加数据
       */
      addressByIdData2: {},
      /**
       * 用户id
       */
      userId: ''
    }
  },
  created() {
    this.queryUser(this.queryData, this.pageSize, this.current)
  },
  methods: {
    addAddress() {
      this.addressByIdData2.provinceId = this.selectedAddress[0]
      this.addressByIdData2.cityId = this.selectedAddress[1]
      this.addressByIdData2.countyId = this.selectedAddress[2]
      user
        .addAddress(this.addressByIdData2)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.addressByIdData2 = {}
          this.selectedAddress = []
          this.dialogVisible2 = false
          this.dialogFormVisible = false
        })
        .catch((e) => {

        })
    },
    openAdd() {
      this.dialogVisible2 = true
      this.addressByIdData2.userId = this.userId
      this.addressByIdData2.isDefault = false
    },
    /**
     * 修改地址信息
     */
    onSubmit() {
      this.addressByIdData.provinceId=this.updateAddress[0];
      this.addressByIdData.cityId=this.updateAddress[1];
      this.addressByIdData.countyId=this.updateAddress[2];
      user
        .updateAddressDataById(this.addressByIdData)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.queryAddress=[];
          this.updateAddress=[];
          this.dialogFormVisible = false
          this.dialogVisible = false
          this.addressByIdData = {}
        })
        .catch((e) => {

        })
    },
    getAddressDataById(index, row) {
      this.dialogVisible = true;
      this.updateAddress.push(row.provinceId);
      this.updateAddress.push(row.cityId);
      this.updateAddress.push(row.countyId)
      user
        .getAddressDataById(row.id)
        .then((data) => {
          this.addressByIdData = data.data;
        })
        .catch((e) => {

        })
    },
    /**
     * 地址删除
     */
    handleDeleteAddress(index, row) {
      this.deleteAddressOpen(
        '删除这条地址信息后,不可在恢复,确定要删除吗?',
        row.id
      )
    },
    /**
     * 地址删除提示
     */
    deleteAddressOpen(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .deleteAddressById(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.dialogFormVisible = false
            })
            .catch((e) => {

            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 修改地址簿为默认地址
     */
    changeTheDefaultAddress(index, row) {
      const r = {
        id: row.id,
        userId: row.userId,
        name: row.name,
        phoneNumber: row.phoneNumber,
        extensionNumber: row.extensionNumber,
        provinceId: row.provinceId,
        cityId: row.cityId,
        countyId: row.countyId,
        address: row.address,
        companyName: row.companyName,
        isDefault: row.isDefault,
        createTime: row.createTime
      }
      user
        .changeTheDefaultAddress(r)
        .then((data) => {
          this.$message({
            type: data.flag == true ? 'success' : 'error',
            message: data.message,
            showClose: true
          })
          this.dialogFormVisible = false
        })
        .catch((e) => {

        })
    },
    selected(data) {
      this.addressByIdData.province = data.province.value
      this.addressByIdData.city = data.city.value
      this.addressByIdData.county = data.area.value
    },
    selected2(data) {
      this.addressByIdData2.province = data.province.value
      this.addressByIdData2.city = data.city.value
      this.addressByIdData2.county = data.area.value
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
      this.deleteOpen('你确定要删除该条数据,删除之后,不可在恢复!!', row.id)
    },
    queryUser(data, pageSize, pageNum) {
      user
        .queryByPhone(data, pageSize, pageNum)
        .then((data) => {
          this.userData = data.data
          this.pageSize = this.userData.size
          this.current = this.userData.current
        })
        .catch((e) => {

        })
    },
    handleSizeChange(val) {
      // this.pageSize = val;
      this.queryUser(this.queryData, val, this.current)
    },
    handleCurrentChange(val) {
      // this.current = val;
      this.queryUser(this.queryData, this.pageSize, val)
    },
    /**
     * 审核
     */
    checkMember(index, row) {
      this.open('您确定要审核吗?', row.id)
    },
    /**
     * 审核操作提示
     */
    open(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .checkMember(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.queryUser(this.queryData, this.pageSize, this.current)
            })
            .catch((e) => {

            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 删除提示
     */
    deleteOpen(message, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      })
        .then(() => {
          user
            .deleteUserById(id)
            .then((data) => {
              this.$message({
                type: data.flag == true ? 'success' : 'error',
                message: data.message,
                showClose: true
              })
              this.queryUser(this.queryData, this.pageSize, this.current)
            })
            .catch((e) => {

            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    showAddressBookInfoByUserId(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.addressData.userId = row.id
      this.userId = row.id
      user
        .queryAddressBookBasedOnUserId(
          this.addressData,
          this.addressPageSize,
          this.addressPageNum
        )
        .then((data) => {
          this.addressByUserIdData = data.data
        })
        .catch((e) => {
          // this.$message({
          //   type:'error',
          //   message:e.message,
          //   showClose:true
          // })
        })
    }
  }
}
</script>

<style>
</style>
